<!DOCTYPE html>
<!--
* CoreUI - Free Bootstrap Admin Template
* @version v2.0.0
* @link  https://www.bilibili.com/video/av26256249/?p=1
* @link  
* @link  
* @link  https://www.bootcdn.cn/
* @link  http://mockjs.com/
* @link  http://doc.vue-js.com/
* @link  https://v4.bootcss.com/docs/4.0/getting-started/introduction/
* @link  http://www.fontawesome.com.cn/
* @link https://coreui.io
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
* Licensed under MIT (https://coreui.io/license)
-->

<html lang="en">

<head>
    <!-- <base href="./"> -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
    <meta name="author" content="Łukasz Holeczek">
    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
    <title>User UI</title>
    <!-- Icons字体图标 CSS-->
    <link href="vendors/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
    <link href="vendors/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
    <link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="vendors/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
    <!-- Main styles for this application-->
    <link href="css/style.css" rel="stylesheet">
    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
    <!-- <style>
            *{margin: 0;padding: 0;}
            #page-break{margin-top: 20px;margin-left: 20px;}
            #page-break li{list-style: none;}
            #page-break a{border: 1px solid #ddd; text-decoration: none;float: left;padding: 6px 12px;color: #337ab7;cursor: pointer}
            #page-break a:hover{background-color: #eee;}
            #page-break a .banclick{cursor: not-allowed;}
            #page-break .active a{color: #fff;cursor: default;background-color: #337ab7;border-color: #337ab7;}
            #page-break i{font-style: normal;color: #d44950;margin: 0px 4px;font-size: 12px;}
            #page-break .jumpbox .jumppage {border: 1px solid #ddd; margin-left: 40px; height: 33px; width: 40px; float: left;}
            #page-break .jumpbox .jumpbtn {cursor: pointer; margin-left: 10px;}
            #page-break .jumpbox .jumpbtn:active {color: #337ab7;}
          </style>	 -->
    <style>
        [v-clock] {
            display: none;
        }

        /*任何没有加载好的，都不直接显示插值表达式*/
    </style>
</head>

<body class="app header-fixed aside-menu-fixed ">
    <header class="app-header navbar">
        <a class="navbar-brand" href="#">
            <i class="fa fa-graduation-cap fa-2x" aria-hidden="true"></i>学习平台
        </a>
        <ul class="nav navbar-nav d-md-down-none">
            <li class="nav-item px-3">
                <a class="nav-link" href="#">工作台</a>
            </li>
            <li class="nav-item px-3">
                <a class="nav-link" href="#">课程管理</a>
            </li>
            <li class="nav-item px-3">
                <a class="nav-link" href="#">设置</a>
            </li>
        </ul>
        <ul class="nav navbar-nav ml-auto">
            <li class="nav-item d-md-down-none">
                <a class="nav-link" href="#">
                    <i class="icon-bell"></i>
                    <span class="badge badge-pill badge-danger">6</span>
                </a>
            </li>
            <li class="nav-item d-md-down-none">
                <a class="nav-link" href="#">
                    <i class="icon-list"></i>
                </a>
            </li>
            <li class="nav-item d-md-down-none">
                <a class="nav-link" href="#">
                    <i class="icon-location-pin"></i>
                </a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
                    aria-expanded="false">
                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
                </a>
                <div class="dropdown-menu dropdown-menu-right">
                    <div class="dropdown-header text-center">
                        <strong>Account</strong>
                    </div>
                    <a class="dropdown-item" href="#">
                        <i class="fa fa-bell-o"></i> Updates
                        <span class="badge badge-info">42</span>
                    </a>
                    <a class="dropdown-item" href="#">
                        <i class="fa fa-envelope-o"></i> Messages
                        <span class="badge badge-success">42</span>
                    </a>
                    <a class="dropdown-item" href="#">
                        <i class="fa fa-tasks"></i> Tasks
                        <span class="badge badge-danger">42</span>
                    </a>
                    <a class="dropdown-item" href="#">
                        <i class="fa fa-comments"></i> Comments
                        <span class="badge badge-warning">42</span>
                    </a>
                    <div class="dropdown-header text-center">
                        <strong>Settings</strong>
                    </div>
                    <a class="dropdown-item" href="#">
                        <i class="fa fa-user"></i> Profile</a>
                    <a class="dropdown-item" href="#">
                        <i class="fa fa-wrench"></i> Settings</a>
                    <a class="dropdown-item" href="#">
                        <i class="fa fa-usd"></i> Payments
                        <span class="badge badge-secondary">42</span>
                    </a>
                    <a class="dropdown-item" href="#">
                        <i class="fa fa-file"></i> Projects
                        <span class="badge badge-primary">42</span>
                    </a>
                    <div class="divider"></div>
                    <a class="dropdown-item" href="#">
                        <i class="fa fa-shield"></i> Lock Account</a>
                    <a class="dropdown-item" href="#">
                        <i class="fa fa-lock"></i> Logout</a>
                </div>
            </li>
        </ul>
        <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
            <span class="navbar-toggler-icon"></span>
        </button>
        <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
            <span class="navbar-toggler-icon"></span>
        </button>
    </header>
    <div class="app-body">
        <main class="main">
            <!-- Breadcrumb-->
            <ol class="breadcrumb">
                <li class="breadcrumb-item">首页</li>
                <li class="breadcrumb-item active">用户管理</li>
                <li class="breadcrumb-item active"><a href="http://127.0.0.1:5500/login.html">返回登录UI</a></li>
                <!-- Breadcrumb Menu-->
            </ol>
            <div class="container-fluid">
                <!--指定插值不闪烁的控件-->
                <div class="animated fadeIn" id="itemsTemplate">
                    <!-- <p v-cloak>{{msg}}</p> -->
                    <div class="card">
                        <div class="card-header">
                            <i class="icon-people" aria-hidden="true"></i>信息管理
                            <div class="card-header-actions">
                                <a class="card-header-action btn-setting" @click="addBox()" href="#">
                                    <i class="icon-plus"> 新增</i>
                                </a>
                                <a class="card-header-action btn-close" data-toggle="modal" data-target="#multipleModal"
                                    href="#">
                                    <i class="icon-trash" aria-hidden="true"> 删除</i>
                                </a>

                            </div>
                        </div>
                        <div class="card-body collapse show" id="collapseExample" clock>
                            <table class="table table-responsive-sm table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <!-- click 与 change 的区别，前者先传值再操作，或者先操作再传值 -->
                                        <th><input type="checkbox" v-model="checkall" @change="checkAll" />全选/反选</th>
                                        <th>用户名</th>
                                        <th>注册时间</th>
                                        <th>角色</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- <tr v-for="(item, index) in items"
                                        v-if="index>=(curpage-1)*pagesize && index < curpage*pagesize"> -->
                                    <tr v-for="(item, index) in pageItems">
                                        <td><input type="checkbox" v-model="item.select"
                                                @change="checkOne" />#{{pageIndex * 5 + index}}
                                        </td>
                                        <td @click="edit(index)" contenteditable="false">{{item.name}}</td>
                                        <td @click="edit(index)" contenteditable="false">{{item.registerDate}}</td>
                                        <td @click="edit(index)" contenteditable="false">{{item.role}}</td>
                                        <td @click="edit(index)">
                                            <span v-if="item.status=='激活'"
                                                class="badge badge-success">{{item.status}}</span>
                                            <span v-if="item.status=='禁用'"
                                                class="badge badge-danger">{{item.status}}</span>
                                        </td>
                                        <td>
                                            <button class="btn btn-ghost-primary" type="button" @click="show()"><i
                                                    class="icon-note"></i> 查看</button>
                                            <button class="btn btn-ghost-primary" type="button" @click="edit(index)"><i
                                                    class="icon-note"></i> 编辑</button>
                                            <button class="btn btn-ghost-danger" type="button"
                                                v-on:click="confirmDel(index)"><i class="fa fa-trash-o fa-lg"></i>
                                                删除</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <!-- 翻页 -->
                            <div>
                                <template>
                                    <ul class="pagination">
                                        <li class="page-item">
                                            <a class="page-link" href="#" v-on:click="PrePage()">Prev</a>
                                        </li>
                                        <!-- v-bind:以动态地切换 class  如果页码page的值等于当前页数pageIndex的值+1，则动态切换切换class active-->
                                        <li class="page-item" v-for="page in pageCount"
                                            v-bind:class="page==pageIndex+1 ? 'active' : ''">
                                            <a class="page-link" href="#" v-on:click="pageIndex = page-1">{{page}}</a>
                                        </li>

                                        <li class="page-item">
                                            <a class="page-link" href="#" v-on:click="NextPage()">Next</a>
                                        </li>
                                    </ul>
                                </template>
                            </div>
                        </div>
                    </div>
                    <!-- Modal删除 -->
                    <div class="modal fade" id="dangerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                        aria-hidden="true" data-backdrop="static">
                        <div class="modal-dialog modal-danger" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">危险</h5>
                                    <button class="close" type="button" @click="off" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <p>记录删除后将无法恢复！确定要删除吗？</p>
                                </div>
                                <div class="modal-footer">
                                    <button class="btn btn-danger" type="button" v-on:click="del()">确认</button>
                                    <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Modal多项删除 -->
                    <div class="modal fade" id="multipleModal" tabindex="-1" role="dialog"
                        aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
                        <div class="modal-dialog modal-danger" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">危险</h5>
                                    <button class="close" type="button" @click="off" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <p>记录删除后将无法恢复！确定要删除吗？</p>
                                </div>
                                <div class="modal-footer">
                                    <button class="btn btn-danger" type="button" @click="multipleDel">确认</button>
                                    <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Modal删除成功 -->
                    <div class="modal fade show" id="successModal" tabindex="-1" role="dialog"
                        aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
                        <div class="modal-dialog modal-success" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">成功</h5>
                                    <button class="close" type="button" v-on:click="off" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <p>删除成功!</p>
                                </div>
                                <div class="modal-footer">
                                    <button class="btn btn-success" type="button" @click="off">确定</button>
                                </div>
                            </div>
                            <!-- /.modal-content-->
                        </div>
                        <!-- /.modal-dialog-->
                    </div>
                    <!-- Modal删除失败 -->
                    <div class="modal fade show" id="defeatedModal" tabindex="-1" role="dialog"
                        aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
                        <div class="modal-dialog modal-warning" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">警告</h5>
                                    <button class="close" type="button" v-on:click="off" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <p>删除失败!</p>
                                </div>
                                <div class="modal-footer">
                                    <button class="btn btn-warning" type="button" @click="off">确定</button>
                                </div>
                            </div>
                            <!-- /.modal-content-->
                        </div>
                        <!-- /.modal-dialog-->
                    </div>
                    <!-- Modal编辑 -->
                    <div class="modal fade" id="primaryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                        aria-hidden="true" data-backdrop="static">
                        <div class="modal-dialog  modal-primary" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">编辑</h5>
                                    <button class="close" type="button" @click='off' aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <form class="needs-validation" action="" method="post"
                                        enctype="multipart/form-data">
                                        <div class="form-group row">
                                            <label class="col-md-3 col-form-label" for="text-input">用户名</label>
                                            <div class="col-md-9">
                                                <input class="form-control" id="text-input" type="text"
                                                    name="text-input" placeholder="用户名" v-model.lazy="editItems.name"
                                                    pattern="^[\u4e00-\u9fa5·A-Za-z][\u4E00-\u9FA5·A-Za-z0-9-_\s]{1,15}$"
                                                    required>
                                                <div class="invalid-feedback">
                                                    用户名必须2到16位中英文、首位必须是中英文，(字母，数字，下划线，减号)
                                                    <!-- pattern="^([\u4e00-\u9fa5·A-Za-z][\u4e00-\u9fa5·A-Za-z0-9-_]{1,10})$" -->
                                                </div>
                                                <!-- <span class="help-block">用户名必须2到16位中英文(字母，数字，下划线，减号)</span> -->
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-md-3 col-form-label" for="email-input">注册时间</label>
                                            <div class="col-md-9">
                                                <input class="form-control" id="1" type="text" name="disabled-input"
                                                    placeholder="年 -月-日 --:--" disabled
                                                    v-model.lazy="editItems.registerDate"></div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-md-3 col-form-label" for="password-input">角色</label>
                                            <div class="col-md-9">
                                                <select class="custom-select" v-model.lazy="editItems.role">
                                                    <option selected>教师</option>
                                                    <option>学生</option>
                                                </select>
                                                <!-- <span>{{ selected1 }}</span> -->
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-md-3 col-form-label">状态</label>
                                            <div class="col-md-9 col-form-label">
                                                <div class="form-check form-check-inline mr-1">
                                                    <input class="form-check-input" id="inline-radio1" type="radio"
                                                        v-model.lazy="editItems.status" value="激活">
                                                    <label class="form-check-label" for="inline-radio1">激活</label>
                                                </div>
                                                <div class="form-check form-check-inline mr-1">
                                                    <input class="form-check-input" type="radio"
                                                        v-model.lazy="editItems.status" value="禁用">
                                                    <label class="form-check-label" for="inline-radio2">禁用</label>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button class="btn btn-primary" type="button" @click="editSubmit">保存</button>
                                    <button class="btn btn-secondary" type="button" @click='off'>取消</button>
                                </div>
                            </div>
                            <!-- /.modal-content-->
                        </div>
                        <!-- /.modal-dialog-->
                    </div>
                    <!-- Modal添加 data-backdrop="static"禁止点击外面触发关闭-->
                    <div class="modal fade show" id="addModal" tabindex="-1" role="dialog"
                        aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
                        <div class="modal-dialog modal-dialog-centered modal-primary" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">新增</h5>
                                    <button class="close" type="button" v-on:click="off" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <form class="validation" action="" method="post" enctype="multipart/form-data">
                                        <div class="form-group row">
                                            <label class="col-md-3 col-form-label" for="text-input">用户名</label>
                                            <div class="col-md-9">
                                                <input class="form-control" id="text-input" type="text"
                                                    name="text-input" placeholder="用户名" v-model="newItems.name"
                                                    pattern="^[\u4e00-\u9fa5·A-Za-z][\u4E00-\u9FA5·A-Za-z0-9-_\s]{1,15}$"
                                                    required>
                                                <div class="invalid-feedback">
                                                    用户名必须2到16位中英文、首位必须是中英文，(字母，数字，下划线，减号)
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-md-3 col-form-label" for="email-input">注册时间</label>
                                            <div class="col-md-9" id="itemstime">
                                                <input class="form-control" id="1" type="text" name="disabled-input"
                                                    placeholder="年 -月-日 --:--" disabled=""
                                                    v-model="newItems.registerDate" value=""></div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-md-3 col-form-label" for="password-input">角色</label>
                                            <div class="col-md-9">
                                                <select class="custom-select" v-model="newItems.role">
                                                    <option selected>教师</option>
                                                    <option>学生</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-md-3 col-form-label">状态</label>
                                            <div class="col-md-9 col-form-label">
                                                <div class="form-check form-check-inline mr-1">
                                                    <input class="form-check-input" id="inline-radio1" type="radio"
                                                        v-model="newItems.status" value="激活">
                                                    <label class="form-check-label" for="inline-radio1">激活</label>
                                                </div>
                                                <div class="form-check form-check-inline mr-1">
                                                    <input class="form-check-input" type="radio"
                                                        v-model="newItems.status" value="禁用">
                                                    <label class="form-check-label" for="inline-radio2">禁用</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-md-3 col-form-label" for="file-input">上传文件</label>
                                            <div class="col-md-9">
                                                <input id="file-input" type="file" name="file-input">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button class="btn btn-primary" type="button" v-on:click="add">保存</button>
                                    <button class="btn btn-secondary" type="button" v-on:click="off">取消</button>
                                </div>
                            </div>
                            <!-- /.modal-content-->
                        </div>
                        <!-- /.modal-dialog-->
                    </div>
                </div>

            </div>
        </main>
    </div>

    <footer class="app-footer">
        <div>
            <a href="http://127.0.0.1:5500/index.html">CoreUI</a>
            <span>&copy; 2018 creativeLabs.</span>
        </div>
        <div class="ml-auto">
            <span>Powered by</span>
            <a href="http://127.0.0.1:5500/index.html">CoreUI</a>
        </div>
    </footer>
    <!-- CoreUI and necessary plugins-->
    <script src="vendors/jquery/js/jquery.min.js"></script>
    <script src="vendors/popper.js/js/popper.min.js"></script>
    <script src="vendors/bootstrap/js/bootstrap.min.js"></script>
    <script src="vendors/pace-progress/js/pace.min.js"></script>
    <script src="vendors/perfect-scrollbar/js/perfect-scrollbar.min.js"></script>
    <script src="vendors/@coreui/coreui/js/coreui.min.js"></script>
    <!-- <script src="vendors/chart.js/js/Chart.min.js"></script> -->
    <!-- <script src="vendors/@coreui/coreui-plugin-chartjs-custom-tooltips/js/custom-tooltips.min.js"></script> -->
    <!-- <script src="js/main.js"></script> -->
    <script src="js/mock-min.js"></script>
    <script src="js/vue.js"></script>
    <!-- <script src="js/page.js"></script> -->
    <!-- <script src="js/vue.min.js"></script> -->
    <!-- <script src="https://cdn.bootcss.com/vue/2.6.9/vue.common.dev.js"></script> -->
    <!-- 获取数据 -->
    <script>
        var items = [];
        var app;
        // var pagingData = {
        //     size: 5, //一页加载数据
        //     pageIndex: 0, //当前页
        //     total: 0, //当前总数
        //     serverSize: 100,
        //     serverOffset: 0,
        //     serverTotal: 0,
        //     sizeOptions: [{
        //             text: "10/页",
        //             value: "10"
        //         },
        //         {
        //             text: "20/页",
        //             value: "20"
        //         },
        //         // { text: '30/页', value: '30' },
        //         {
        //             text: "50/页",
        //             value: "50"
        //         },
        //         {
        //             text: "100/页",
        //             value: "100"
        //         }
        //     ]
        // };

        $(function () {
            //使用Mock.js库，模拟一个api数据访问接口
            //api的访问地址为：http://127.0.0.1:5500/czf
            Mock.mock("http://127.0.0.1:8080/czf", {
                'data|30-90': [{
                    id: "@increment()",
                    'name|1': ["@name", "@cname"],
                    'role|1': ["教师", "学生"],
                    registerDate: "@datetime()",
                    'status|1': ["激活", "禁用"],
                }],
                success: true,
                code: 200,
                msg: "Success"
            });
            //使用jQuery提供的getJSON方法，向服务器发送一个请求
            //返回的结果由第二个参数的function处理
            $.getJSON("http://127.0.0.1:8080/czf", function (response) {
                items = response.data;
                // pagingData.total = items.length;
                // pagingData.serverTotal = response.data.total;
                // if (items.length < pagingData.serverSize) {
                //     pagingData.serverTotal = items.length;
                // }
                var i;
                for (i = 0; i < items.length; i++) {
                    items[i].select = false;
                }
                //使用vue.js框架，将response.data数据填充到itemsTemplate模板
                app = new Vue({
                    el: '#itemsTemplate',
                    data: {
                        items: items,
                        // paging: pagingData,
                        //添加临时数组对象
                        newItems: '',
                        //编辑临时数组对象
                        editItems: {
                            id: '',
                            name: '',
                            role: '',
                            registerDate: '',
                            status: '',
                        },
                        index: -1,
                        editIndex: -1,
                        delIndex: -1,
                        checkall: false, // 正在进行中的数据是否被选中

                        pageSize: 5, //一页加载数据
                        pageIndex: 0, //当前页面
                        total: items.length, //总数据
                        // pageCount:pageCount,


                    },
                    computed: {
                        // vue计算属性
                        pageItems: function () {
                            // `this` points to the vm instance
                            var startIndex = this.pageIndex * this.pageSize; //当前页面起始index
                            var endIndex = startIndex + this.pageSize - 1; //当前页面结束index

                            // alert(this.pageIndex);
                            // var paging = this.paging;
                            return this.items.filter(function (value, index) {
                                // 显示一个数组的过滤或排序副本，而不实际改变或重置原始数据
                                return (
                                    index >= startIndex &&
                                    index <= endIndex
                                );
                            });

                        },
                        pageCount: function () {
                            // 计算总页数
                            var pageCount = Math.ceil(this.total / this.pageSize);

                            return pageCount > 5 ? 5 : pageCount;

                        },
                        // pageStartIndex: function () {
                        //     var pageCount = Math.ceil(
                        //         this.paging.serverSize * this.paging.serverOffset / this
                        //         .paging.size
                        //     );
                        //     return pageCount > 10 ? 10 : pageCount;
                        // },
                        // isPageMore: function (pageNumber) {
                        //     var pageCount = Math.ceil(
                        //         this.paging.serverTotal / this.paging.size
                        //     );
                        //     return pageCount > 10;
                        // },

                    },
                    // 在 `methods` 对象中定义方法
                    methods: {
                        //上一页
                        PrePage: function () {
                            if (this.pageIndex > 0) {
                                this.pageIndex -= 1;
                            }
                        },
                        // 下一页
                        NextPage: function () {
                            if (this.pageIndex < this.pageCount - 1) {
                                this.pageIndex += 1;
                            }
                        },
                        confirmDel: function (index) {
                            $('#dangerModal').modal('show');
                            this.delIndex = this.pageIndex * 5 + index;
                        },
                        del: function () {
                            this.items.splice(this.delIndex, 1);
                            $('#dangerModal').modal('hide');
                            $('#successModal').modal('show');
                        },
                        //多项删除
                        multipleDel: function () {
                            $('#multipleModal').modal('hide');
                            var flag = 0;
                            for (var i = 0; i < this.items.length; i++) {
                                if (this.items[i].select === true) {
                                    // alert(this.items[i].id)
                                    this.items.splice(i, 1);
                                    i--;
                                    flag = 1;
                                }
                            }
                            if (flag === 1) {
                                $('#successModal').modal('show');
                                flag = 0;
                            } else {
                                $('#defeatedModal').modal('show');
                            }
                            this.pageIndex = 0;
                        },
                        // 添加
                        addBox: function () {
                            var form = document.getElementsByClassName('validation')[
                                0];
                            form.classList.remove('was-validated');
                            $('#addModal').modal('show');

                            this.newItems = {
                                id: items.length + 1, //id自动+1
                                name: '',
                                role: '学生', //默认为学生
                                registerDate: itemstime,
                                status: '禁用', //默认为禁用状态
                            };
                        },
                        //添加保存
                        add: function () {
                            var form = document.getElementsByClassName('validation')[
                                0];
                            if (form.checkValidity() === true) {
                                //插入到items中
                                // this.items.push(this.newItems);
                                Vue.set(this.items, this.items.length, this.newItems);
                                $('#addModal').modal('hide');
                            };
                            form.classList.add('was-validated');
                            // this.newItems = {};
                            // this.seen = false

                        },
                        //取消、关闭模态框
                        off: function () {
                            $('#addModal').modal('hide');
                            $('#primaryModal').modal('hide');
                            $('#dangerModal').modal('hide');
                            $('#multipleDel').modal('hide');
                            $('#successModal').modal('hide');
                            $('#defeatedModal').modal('hide');
                        },
                        //编辑
                        edit: function (index) {
                            var form = document.getElementsByClassName('needs-validation')[
                                0];
                            form.classList.remove('was-validated');
                            var newIndex = this.pageIndex * 5 + index;
                            this.editIndex = newIndex;
                            this.editItems = JSON.parse(JSON.stringify(this.items[
                                newIndex]));
                            $('#primaryModal').modal('show');
                        },
                        //编辑后提交
                        editSubmit: function () {

                            var form = document.getElementsByClassName('needs-validation')[
                                0];
                            if (form.checkValidity() === true) {
                                Vue.set(this.items, this.editIndex, this.editItems);
                                $('#primaryModal').modal('hide');
                            };
                            form.classList.add('was-validated');
                        },
                        // 用户全选
                        checkAll() {
                            // alert(1)
                            for (var i = 0; i < this.items.length; i++) {
                                this.items[i].select = this.checkall;
                            }
                            // this.items.forEach(items => items.select = this.checkall);
                            // alert(this.checkall);
                        },
                        //用户单选
                        checkOne() {

                            this.checkall = this.items.every(items => items.select);
                            // alert(this.checkall)
                        },




                    },
                });
                return;
            });
        });
    </script>

    <!-- 获取系统当前时间 -->
    <script type="text/javascript">
        window.setInterval("showtime()");

        function showtime() {
            var date = new Date();
            var s1 = "-";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            var hh = date.getHours();
            var mi = date.getMinutes();
            var ss = date.getSeconds();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            if (hh >= 0 && hh <= 9) {
                hh = "0" + hh;
            }
            if (mi >= 0 && mi <= 9) {
                mi = "0" + mi;
            }
            if (ss >= 0 && ss <= 9) {
                hh = "0" + hh;
            }
            itemstime = year + s1 + month + s1 + strDate + " " + hh + ":" + mi +
                ":" + ss +
                " ";
            return itemstime;
        }
    </script>
    <!-- 动态时间 -->
    <!-- <script type="text/javascript">
        window.setInterval("showtime()");

        function showtime() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hh = date.getHours();
            var mi = date.getMinutes();
            var ss = date.getSeconds();
            // var wk="星期"+"日一二三四五六".charAt(date.getDay());
            document.getElementById("itemstime").innerHTML = year + "-" + month + "-" + day + " " + hh + ":" + mi +
                ":" + ss +
                " "; //+wk;
        }
    </script> -->
</body>

</html>